{% from 'IcsocUIBundle:Macro:actions.html.twig' import button %}
{% import 'IcsocIvrBundle:Ivr:node_fields.html.twig' as ivr %}
{% from 'IcsocUIBundle:Macro:formValidator.html.twig' import jqvalidator %}

<form class="form-horizontal" action="" method="post" name="form" id="form">
    {{ ivr.node_name()  }}
    <div class="form-group">
        <label for="form_transfer_type" class="col-sm-3 control-label no-padding-right">{{ "Transfer type"|trans }} <font color="red">*</font> </label>
        <div class="col-sm-9">
            <select id="form_transfer_type" name="form[transfer_type]" class="col-sm-6">
                {% for key, transfer_type in transfer_type %}
                    <option value="{{ key }}">
                        {{ transfer_type|trans }}
                    </option>
                {% endfor %}
            </select>
        </div>
    </div>
    <div id="form_variable_name_div" class="form-group">
        <label for="form_variable_name" class="col-sm-3 control-label no-padding-right">{{ "Variable names"|trans }} <font color="red">*</font> </label>
        <div class="col-sm-9">
            <select id="form_variable_name" class="col-sm-6">
                <option value="">{{ 'Please Selected Variable'|trans }}</option>
            </select>
            <span class="help-button col-xs-3 col-sm-1" data-rel="popover" data-trigger="hover" data-placement="bottom" data-content="{{ "variable name help"|trans }},{{ 'system variable name help'|trans }}" title="" data-original-title="">?</span>
        </div>
    </div>
    <div id="form_queue_div" class="form-group">
        <label for="form_queue" class="col-sm-3 control-label no-padding-right">{{ "Queue"|trans }} <font color="red">*</font> </label>
        <div class="col-sm-9">
            <select id="form_queue" name="form[queue]" required="required" class="chosen-select">
                <option value="" selected="selected">{{ "Select a queue"|trans }}</option>
                {% for key, queue in queue %}
                    <option value="{{ key }}">
                        {{ queue }}
                    </option>
                {% endfor %}
            </select>
        </div>
    </div>
    {{ ivr.play_sound('Before QUEUE Sound','sound',sounds_type,sounds_list,false)  }}
    <div class="form-group">
        <label for="form_if_enable_queue_timeout_continue" class="col-sm-3 control-label no-padding-right">{{ "If enable queue timeout continue"|trans }}  </label>
        <div class="col-sm-9">
            <select id="form_if_enable_queue_timeout_continue" name="form[if_enable_queue_timeout_continue]" class="col-sm-6">
                <option value="0">{{ "no"|trans }}</option>
                <option value="1">{{ "yes"|trans }}</option>
            </select>
            <span class="help-button col-xs-3 col-sm-1" data-rel="popover" data-trigger="hover" data-placement="bottom" data-content="{{ "if_enable_queue_timeout_continue help"|trans }}" title="" data-original-title="">?</span>
        </div>
    </div>
    <div id="form_max_queue_times_div" class="form-group">
        <label for="form_max_queue_times" class="col-sm-3 control-label no-padding-right">{{ "Max queue times"|trans }}  </label>
        <div class="col-sm-9">
            <select id="form_max_queue_times" name="form[max_queue_times]" class="col-sm-6">
                {% for max_queue_times in max_queue_times %}
                    <option value="{{ max_queue_times }}">
                        {{ max_queue_times }}
                    </option>
                {% endfor %}
            </select>
            <span class="help-button col-xs-3 col-sm-1" data-rel="popover" data-trigger="hover" data-placement="bottom" data-content="{{ "max_queue_times help"|trans }}" title="" data-original-title="">?</span>
        </div>
    </div>
    {{ ivr.play_sound('Before conn sound','before_conn_sound',sounds_type,sounds_list,false)  }}
    {{ ivr.play_sound('Agent side sound','agent_side_sound',sounds_type,sounds_list,false)  }}
    <div class="form-group">
        <label for="form_if_handle_none_agent" class="col-sm-3 control-label no-padding-right">{{ "If Handle No Ngent"|trans }}  </label>
        <div class="col-sm-9">
            <select id="form_if_handle_none_agent" name="form[if_handle_none_agent]" class="col-sm-6">
                <option value="0">{{ "no"|trans }}</option>
                <option value="1">{{ "yes"|trans }}</option>
            </select>
        </div>
    </div>
    <div id="form_if_handle_queue_times_exceed_div" class="form-group">
        <label for="form_if_handle_queue_times_exceed" class="col-sm-3 control-label no-padding-right">{{ "If Handle Queue Times Out"|trans }}  </label>
        <div class="col-sm-9">
            <select id="form_if_handle_queue_times_exceed" name="form[if_handle_queue_times_exceed]" class="col-sm-6">
                <option value="0">{{ "no"|trans }}</option>
                <option value="1">{{ "yes"|trans }}</option>
            </select>
        </div>
    </div>
    <div class="form-group">
        <label for="form_if_handle_queue_full" class="col-sm-3 control-label no-padding-right">{{ "If Handle Queue Full"|trans }}  </label>
        <div class="col-sm-9">
            <select id="form_if_handle_queue_full" name="form[if_handle_queue_full]" class="col-sm-6">
                <option value="0">{{ "no"|trans }}</option>
                <option value="1">{{ "yes"|trans }}</option>
            </select>
        </div>
    </div>
    <div id="form_if_handle_queue_timeout_div" class="form-group">
        <label for="form_if_handle_queue_timeout" class="col-sm-3 control-label no-padding-right">{{ "If Handle Queue Timeout"|trans }} </label>
        <div class="col-sm-9">
            <select id="form_if_handle_queue_timeout" name="form[if_handle_queue_timeout]" class="col-sm-6">
                <option value="0">{{ "no"|trans }}</option>
                <option value="1">{{ "yes"|trans }}</option>
            </select>
        </div>
    </div>
    <div class="form-group">
        <label for="form_if_open_vip" class="col-sm-3 control-label no-padding-right">{{ "IF Open VIP Verify"|trans }} </label>
        <div class="col-sm-9">
            <select id="form_if_open_vip" name="form[form_if_open_vip]" class="col-sm-6">
                <option value="0">{{ "no"|trans }}</option>
                <option value="1">{{ "yes"|trans }}</option>
            </select>
            <span class="help-button col-xs-3 col-sm-1" data-rel="popover" data-trigger="hover" data-placement="bottom" data-content="{{ "Open IVR Help"|trans }}" title="" data-original-title="">?</span>
        </div>
    </div>
    {{ ivr.form_api(api_method, api_timeout) }}
    {{ ivr.ivr_count() }}
    <div class="clearfix well well-sm">
        <div class="col-md-offset-4 col-md-8">
            {{ button('Save', 'btn-node-attr') }}
        </div>
    </div>
</form>
<script type="application/javascript">
    $(document).ready(function(){
        setVariableOption($("#form_variable_name"));//处理之前设置的变量

        /**
         * 是否开启技能组超时继续等待事件
         */
        $('#form_if_enable_queue_timeout_continue').on('change', function() {
            if_enable_queue_timeout_continue();
        });

        /**
         * 转接类型改变事件处理
         */
        $('#form_transfer_type').on('change', function() {
            form_transfer_type();
        });

        /**
         *  是否开启VIP验证事件
         */
        $('#form_if_open_vip').on('change', function() {
            if_open_vip();
        });

        $("#form").validate({
            {{ jqvalidator() }}
            debug:true,
            rules: {
                'form[api_url]': {
                    required:true,
                    url: true
                }
            },
            messages: {
                'form[api_url]': {
                    required:"{{ 'Api Url cannot be empty'|trans  }}",
                    url:'{{ 'Please Input Correct Url'|trans }}'
                }
            }
        });

        jQuery.extend(jQuery.validator.messages, {
            'required':'{{ 'This field is required'|trans }}'
        });
    });

    /**
     * 转接类型改变事件处理
     */
    function form_transfer_type(){
        var value = $('#form_transfer_type').val();
        var $form_queue_div = $("#form_queue_div");
        var $form_variable_name_div = $("#form_variable_name_div");
        switch(value){
            case 'fixed':
                $form_queue_div.removeClass('hidden');
                $form_variable_name_div.addClass('hidden');
                break;
            case 'variable':
                $form_queue_div.addClass('hidden');
                $form_variable_name_div.removeClass('hidden');
                break;
            case 'memory':
                $form_queue_div.addClass('hidden');
                $form_variable_name_div.addClass('hidden');
                break;
        }
    }

    /**
     * 排队超时继续等待改变事件处理
     */
    function if_enable_queue_timeout_continue(){
        var value = $('#form_if_enable_queue_timeout_continue').val();
        var $form_if_handle_queue_timeout_div = $("#form_if_handle_queue_timeout_div");
        var $form_max_queue_times_div = $("#form_max_queue_times_div");
        var $form_if_handle_queue_times_exceed_div = $("#form_if_handle_queue_times_exceed_div");
        switch(true){
            case value == 0 :
                $form_if_handle_queue_timeout_div.removeClass('hidden');
                $form_max_queue_times_div.addClass('hidden');
                $form_if_handle_queue_times_exceed_div.addClass('hidden')
                break;
            case value == 1:
                $form_if_handle_queue_timeout_div.addClass('hidden');
                $form_max_queue_times_div.removeClass('hidden');
                $form_if_handle_queue_times_exceed_div.removeClass('hidden')
                break;
        }
    }

    /**
     * 是否开启VIP验证事件处理
     */
    function if_open_vip() {
        var value = $('#form_if_open_vip').val();
        var $form_api = $("[data-text='form-api']");
        if (value == 1) {
            $form_api.removeClass('hidden');
        } else {
            $form_api.addClass('hidden');
        }
    }
</script>
